
import {defineComponent,PropType,computed, ref} from 'vue';
import '@/components/visibleEditor.scss';
import {visibleEditorModelValue} from '@/components/visibleEditor.utils';
import {visibleEditorConfig} from '@/components/visibleEditor.utils';
import {useModel} from '@/components/utils/useModel';
import {visibleEditorBlocksCom} from '@/components/visibleEditorBlocksCom';
export const visibleEditor = defineComponent (  {
    name: 'visibleEditor',
    components: {
        visibleEditorBlocksCom,
    },
    props:{
        modelValue:{type: Object as PropType <visibleEditorModelValue>, required: true},
        config: {type: Object as PropType <visibleEditorConfig>, required: true},
    },
    emits: {
        'update:modelValue': (val?: visibleEditorModelValue) => true
    },
    
    setup(props,ctx){
        const data = useModel(() => props.modelValue, (val) => ctx.emit('update:modelValue', val));
        const containerRef = ref({} as HTMLDivElement);
        const containerStyle = computed(() => ({
            width: `${data.value.container.width}px`,
            height: `${data.value.container.height}px`
        }))
        const menuDragger = {
            current: {
                component: null as null
            },
            dragstart: (e: DragEvent, component) => {
                containerRef.value.addEventListener('dragenter', menuDragger.dragenter);
                containerRef.value.addEventListener('dragover', menuDragger.dragover);
                containerRef.value.addEventListener('dragleave', menuDragger.dragleave);
                containerRef.value.addEventListener('drop', menuDragger.drop);
                menuDragger.current.component = component;
            },
            dragover: (e: DragEvent) => {
                e.preventDefault();
            },
            dragenter: (e: DragEvent) => {
                e.dataTransfer!.dropEffect = 'move';
            },
            dragleave: (e: DragEvent) => {
                e.dataTransfer!.dropEffect = 'none';
            },
            dragend: (e: DragEvent) => {
                containerRef.value.removeEventListener('dragenter', menuDragger.dragenter);
                containerRef.value.removeEventListener('dragover', menuDragger.dragover);
                containerRef.value.removeEventListener('dragleave', menuDragger.dragleave);
                containerRef.value.removeEventListener('drop', menuDragger.drop);
                menuDragger.current.component = null;
            },
            drop: (e: DragEvent) => {
                const blocks = data.value.blocks || [];
                blocks.push({
                    top: e.offsetY,
                    left: e.offsetX
                });
                data.value = {...data.value, blocks};
                console.log('drop',menuDragger.current.component);
            },
            
        }
        return () => (
            <div class="visible-editor">
                <div class="visible-editor-head">操作栏</div>
                <div class="visible-editor-menu">
                    {props.config.componentList.map((component,o) => (
                        <div class="visible-editor-menu-item"
                            draggable
                            onDragstart={(e) => menuDragger.dragstart(e, component)}
                            onDragend={menuDragger.dragend}
                        >
                            <span class="visible-editor-menu-item-label">
                                {component.label}
                            </span>
                            {component.preview()}
                        </div>
                    ))}
                </div>
                <div class="visible-editor-opr">编辑栏</div>
                <div class="visible-editor-body">
                    <div class="visible-editor-content">
                        <div class="visible-editor-container" style={containerStyle.value} ref={containerRef}>
                            {
                                data.value.blocks&&data.value.blocks.map((b,i) => (
                                    <visibleEditorBlocksCom block={b} key={i} ></ visibleEditorBlocksCom>
                                ))
                            }
                        </div>
                    </div> 
                </div>
            </div>
        )
    }
}
    
)